<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="地图分布" name="first">
        <!--地图分布-->
        <SamplingSurveyMap v-if="completeRefreshSamplingSurvey" :allListData="allListData"
          :showHideDivBool="showHideQueryDivBool" @showHideQueryDiv="showHideQueryDiv" :queryMapBool="queryMapBool"
          @showQueryMapDraw="showQueryMapDraw"></SamplingSurveyMap>
        <!--查询面板-->
        <div v-if="showHideQueryDivBool" class="new-queryDiv">
          <div class="new-queryDiv-inner">
            <el-form :model="newQueryParams" label-position="right" label-width="82px">
              <el-form-item label="省" prop="province">
                <el-select v-model="newQueryParams.province" placeholder="请选择" @change="newChooseProvince" clearable
                  value-key="name">
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市" prop="city">
                <el-select v-model="newQueryParams.city" placeholder="请选择" @change="newChooseCity" clearable
                  value-key="name">
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区/县" prop="county">
                <el-select v-model="newQueryParams.county" placeholder="请选择" @change="newChooseCounty" clearable
                  value-key="name">
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="new-queryBtnDiv">
              <el-button @click="queryChartsView" type="primary">查询统计</el-button>
            </div>
            <div class="new-queryMapBtnDiv">
              <el-button @click="queryMapClick" type="primary">地图圈选统计</el-button>
            </div>
            <div class="new-closeBtnDiv">
              <el-button @click="showHideQueryDiv(false)" plain>关闭</el-button>
            </div>
          </div>
        </div>
        <!--空间统计图表-->
        <ChartsView :chartViewQueryParams="chartViewQueryParams" @hideChartView="hideChartView"></ChartsView>
      </el-tab-pane>
      <el-tab-pane label="数据列表" name="second">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="省" prop="provinceId">
            <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
              <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市" prop="cityId">
            <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
              <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区/县" prop="areaId">
            <el-select v-model="queryParams.areaId" placeholder="请选择区/县" clearable>
              <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属乡镇" prop="township">
            <el-input v-model="queryParams.township" placeholder="请输入所属乡镇" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="调研点名称" prop="fieldSurveyName">
            <el-input v-model="queryParams.fieldSurveyName" placeholder="请输入调查点名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="所属任务" prop="taskName">
            <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="提交人" prop="submitter">
            <el-input v-model="queryParams.submitter" placeholder="请输入提交人" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="数据状态" prop="isSubmit">
            <!-- <el-input v-model="queryParams.isSubmit" placeholder="请输入是否提交(0:未提交,1:已提交)" clearable
              @keyup.enter="handleQuery" /> -->
            <el-select v-model="queryParams.isSubmit" placeholder="请输入是否提交">
              <el-option v-for="item in [{ value: '0', label: '未提交' }, { value: '1', label: '已提交' }]" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间" prop="submitTime">
            <el-date-picker clearable v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button plain icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button plain icon="Download" @click="handleImport">导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button plain icon="Edit" @click="handleExport">导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button plain icon="Delete" @click="batchDelete" :disabled="ids.length == 0">批量删除</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:survey:add']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
              v-hasPermi="['system:survey:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:survey:export']">
              导出
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->
        <!--<el-button style='margin:20px 0' type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除
        </el-button>-->
        <el-table v-loading="loading" :data="surveyList" stripe @selection-change="handleSelectionChange" row-key="id">
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="selectable" />
          <el-table-column label="调研点名称" align="center" prop="fieldSurveyName" />
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区/县" align="center" prop="area" />
          <el-table-column label="所属乡镇" align="center" prop="township" min-width="200" />
          <el-table-column label="数据状态" align="center" prop="isSubmit">
            <template #default="scope">
              <span v-if="scope.row.isSubmit == '0'">未提交</span>
              <span v-if="scope.row.isSubmit == '1'">已提交</span>
            </template>
          </el-table-column>
          <el-table-column label="所属任务" align="center" prop='taskName' />
          <el-table-column label="提交人" align="center" prop="submitter" />
          <el-table-column label="提交日期" align="center" prop="submitTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
            <template #default="scope">
              <el-button type="text" v-if="scope.row.taskStatus != 2 && scope.row.flag == 2"
                @click="handleUpdate(scope.row, 'update')">修改</el-button>
              <el-button type="text" v-if="scope.row.flag == 1 || scope.row.flag == 2"
                @click="handleUpdate(scope.row, 'check')">查看</el-button>
              <el-button type="text" v-if="scope.row.taskStatus != 2 && scope.row.flag == 2"
                @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="text" @click="structureFeature(scope.row)">填写典型结构特征</el-button>
              <el-button type="text" @click="creatChart(scope.row)">生成饼状图</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
          @pagination="getList" />

        <!-- 添加或修改抽样点调查对话框 -->
        <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
          <p class="dialogTitle">{{ title }}</p>
          <el-form ref="surveyRef" :model="form" :rules="rules" label-width="200px" scroll-to-error>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="任务名称" prop="taskName">
                  <el-input v-model="form.taskName" placeholder="请输入任务名称" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务编号" prop="taskCode">
                  <el-input v-model="form.taskCode" placeholder="请输入任务编号" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="实地调查点名称" prop="fieldSurveyName">
                  <el-input v-model="form.fieldSurveyName" placeholder="请输入实地调查点名称" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经度" prop="longitude">
                  <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="纬度" prop="latitude">
                  <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="建筑地点-省" prop="province">
                  <el-select v-model="form.province" placeholder="请输入建筑地点-省" @change="chooseProvince" :disabled="isEdit"
                    style="width: 100%;">
                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建筑地点-市" prop="city">
                  <el-select v-model="form.city" placeholder="请输入建筑地点-市" @change="chooseCity" :disabled="isEdit"
                    style="width: 100%;">
                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="建筑地点-区/县" prop="county">
                  <el-select v-model="form.area" placeholder="请输入建筑地点-区/县" :disabled="isEdit" style="width: 100%;">
                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="所属乡镇" prop="township">
                  <el-input v-model="form.township" placeholder="请输入所属乡镇" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="总户数" prop="totalHouseholdNum">
                  <el-input v-model="form.totalHouseholdNum" placeholder="请输入总户数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="总人口（人）" prop="totalPopulation">
                  <el-input v-model="form.totalPopulation" placeholder="请输入总人口" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际常驻人口（人）" prop="actualResidentPopulation">
                  <el-input v-model="form.actualResidentPopulation" placeholder="请输入实际常驻人口" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="外出务工人口（人）" prop="migrantWorkers">
                  <el-input v-model="form.migrantWorkers" placeholder="请输入外出务工人口" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人口比例%（少年儿童）" prop="childrenProportion">
                  <el-input v-model="form.childrenProportion" placeholder="请输入人口比例%" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="人口比例%（中青年）" prop="youngProportion">
                  <el-input v-model="form.youngProportion" placeholder="请输入人口比例%" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人口比例%（老年）" prop="oldAgeProportion">
                  <el-input v-model="form.oldAgeProportion" placeholder="请输入人口比例%" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="交通通达情况" prop="trafficConditions">
                  <el-select v-model="form.trafficConditions" placeholder="请输入交通通达情况" :disabled="canEdit"
                    style="width: 100%;">
                    <el-option v-for="item in [
                      { value: '路况优良', label: '路况优良' },
                      { value: '路况一般', label: '路况一般' },
                      { value: '路况较差', label: '路况较差' },
                      { value: '路况艰难', label: '路况艰难' }
                    ]" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="周边地理环境" prop="environment">
                  <el-select v-model="form.environment" placeholder="请输入周边地理环境" :disabled="canEdit" style="width: 100%;">
                    <el-option v-for="item in [
                      { value: '平原', label: '平原' },
                      { value: '盆地', label: '盆地' },
                      { value: '山区', label: '山区' },
                      { value: '高原', label: '高原' },
                      { value: '河谷', label: '河谷' },
                    ]" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋数量" prop="houseNum">
                  <el-input v-model="form.houseNum" placeholder="请输入房屋数量" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋平均间数" prop="roomAverageNum">
                  <el-input v-model="form.roomAverageNum" placeholder="请输入房屋平均间数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="主要建筑材料" prop="mainBuildingMaterials">
                  <el-input v-model="form.mainBuildingMaterials" placeholder="请输入主要建筑材料" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(高层建筑)" prop="highStructure">
                  <el-input v-model="form.highStructure" placeholder="请输入房屋类型比例%(高层建筑)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(钢结构房屋)" prop="steelStructure">
                  <el-input v-model="form.steelStructure" placeholder="请输入房屋类型比例%(钢结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(多层钢筋混凝土房屋)" prop="concreteStructure">
                  <el-input v-model="form.concreteStructure" placeholder="请输入房屋类型比例%(多层钢筋混凝土房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(砖混结构房屋)" prop="masonryStructure">
                  <el-input v-model="form.masonryStructure" placeholder="请输入房屋类型比例%(砖混结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(砖木结构房屋)" prop="brickWoodStructure">
                  <el-input v-model="form.brickWoodStructure" placeholder="请输入房屋类型比例%(砖木结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(土结构房屋)" prop="soilStructure">
                  <el-input v-model="form.soilStructure" placeholder="请输入房屋类型比例%(土结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(木结构房屋)" prop="woodStructure">
                  <el-input v-model="form.woodStructure" placeholder="请输入房屋类型比例%(木结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(石结构房屋)" prop="stoneStructure">
                  <el-input v-model="form.stoneStructure" placeholder="请输入房屋类型比例%(石结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋类型比例%(其他结构房屋)" prop="otherStructure">
                  <el-input v-model="form.otherStructure" placeholder="请输入房屋类型比例%(其他结构房屋)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(1970年以前)" prop="build70sBefore">
                  <el-input v-model="form.build70sBefore" placeholder="请输入房屋建造年代比例%(1970年以前)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(1971年-1980年)" prop="build70s">
                  <el-input v-model="form.build70s" placeholder="请输入房屋建造年代比例%(1971年-1980年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(1981年-1990年)" prop="build80s">
                  <el-input v-model="form.build80s" placeholder="请输入房屋建造年代比例%(1981年-1990年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(1991年-2000年)" prop="build90s">
                  <el-input v-model="form.build90s" placeholder="请输入房屋建造年代比例%(1991年-2000年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(2001年-2010年)" prop="build00s">
                  <el-input v-model="form.build00s" placeholder="请输入房屋建造年代比例%(2001年-2010年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(2011年-2015年)" prop="build10s">
                  <el-input v-model="form.build10s" placeholder="请输入房屋建造年代比例%(2011年-2015年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(2016年-2020年)" prop="build16s">
                  <el-input v-model="form.build16s" placeholder="请输入房屋建造年代比例%(2016年-2020年)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="房屋建造年代比例%(2021年及以后)" prop="build20s">
                  <el-input v-model="form.build20s" placeholder="请输入房屋建造年代比例%(2021年及以后)" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="周边是否有学校" prop="isSchool">
                  <el-select v-model="form.isSchool" placeholder="请输入周边是否有学校" :disabled="canEdit" style="width: 100%;">
                    <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                      :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="学生数" prop="studentNum">
                  <el-input v-model="form.studentNum" placeholder="请输入学生数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="教室数" prop="classroomNum">
                  <el-input v-model="form.classroomNum" placeholder="请输入教室数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="周边是否有医院" prop="isHospital">
                  <el-select v-model="form.isHospital" placeholder="请输入周边是否有医院" :disabled="canEdit" style="width: 100%;">
                    <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                      :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="医生数" prop="doctorNum">
                  <el-input v-model="form.doctorNum" placeholder="请输入医生数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="床位数" prop="bedNum">
                  <el-input v-model="form.bedNum" placeholder="请输入床位数" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="周边是否有地质灾害" prop="isDisaster">
                  <el-select v-model="form.isDisaster" placeholder="请输入周边是否有地质灾害" :disabled="canEdit"
                    style="width: 100%;">
                    <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                      :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="类型" prop="disasterScale">
                  <el-input v-model="form.disasterType" placeholder="请输入类型" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规模" prop="disasterScale">
                  <el-input v-model="form.disasterScale" placeholder="请输入规模" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="周边是否有水库" prop="isReservoir">
                  <el-select v-model="form.isReservoir" placeholder="请输入周边是否有水库" :disabled="canEdit" style="width: 100%;">
                    <el-option v-for="item in [{ value: '是', label: '是' }, { value: '否', label: '否' }]" :key="item.value"
                      :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="坝型" prop="damType">
                  <el-input v-model="form.damType" placeholder="请输入坝型" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="库容" prop="reservoirCapacity">
                  <el-input v-model="form.reservoirCapacity" placeholder="请输入库容" :disabled="canEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注说明" prop="remarks">
                  <el-input v-model="form.remarks" placeholder="请输入备注说明" maxlength="100" show-word-limit
                    :autosize="{ minRows: 3, maxRows: 5 }" :disabled="canEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="提交人" prop="submitter">
                  <el-input v-model="form.submitter" placeholder="请输入提交人" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提交时间" prop="submitTime">
                  <el-date-picker clearable v-model="form.submitTime" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择提交时间" :disabled="true">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据状态" prop="isSubmit">
                  <el-select v-model="form.isSubmit" placeholder="请输入是否提交" style="width:100%">
                    <el-option v-for="item in [{ value: '0', label: '未提交' }, { value: '1', label: '已提交' }]"
                      :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm" v-if='!canEdit'>确 定</el-button>
              <el-button plain @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 导入对话框 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
          <p></p>
          <el-upload ref="uploadRef" :limit="1" accept=".xls" :headers="upload.headers" :action="upload.url"
            :disabled="upload.isUploading" :before-upload="handleFileBeforeUpload" :on-progress="handleFileUploadProgress"
            :on-error="handleFileUploadError" :on-success="handleFileSuccess" :auto-upload="false" drag>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip text-center">
                <span>仅允许导入xls格式文件。</span>
                <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                  @click="importTemplate('抽样调查点概况信息模板.xls')">下载模板</el-link>
              </div>
            </template>
          </el-upload>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitFileForm">确 定</el-button>
              <el-button plain @click="upload.open = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 填写典型结构特征对话框 -->
        <el-dialog title="填写典型结构特征" v-model="structureFeatureDialog" width="800px" append-to-body @close="cancelFeature">
          <el-form ref="featureRef" :model="featureForm" :rules="featureRules" label-width="180px">
            <p></p>
            <el-form-item label="高层结构" prop="highFeature" v-if="featureDetail.highStructure != 0">
              <el-input v-model="featureForm.highFeature" placeholder="请输入高层结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="钢结构" prop="steelFeature" v-if="featureDetail.steelStructure != 0">
              <el-input v-model="featureForm.steelFeature" placeholder="请输入钢结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="多层钢筋混凝土结构" prop="concreteFeature" v-if="featureDetail.concreteStructure != 0">
              <el-input v-model="featureForm.concreteFeature" placeholder="请输入多层钢筋混凝土结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="砖混结构" prop="masonryFeature" v-if="featureDetail.masonryStructure != 0">
              <el-input v-model="featureForm.masonryFeature" placeholder="请输入砖混结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="砖木结构" prop="brickWoodFeature" v-if="featureDetail.brickWoodStructure != 0">
              <el-input v-model="featureForm.brickWoodFeature" placeholder="请输入砖木结构构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="土结构" prop="soilFeature" v-if="featureDetail.soilStructure != 0">
              <el-input v-model="featureForm.soilFeature" placeholder="请输入土结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="木结构" prop="woodFeature" v-if="featureDetail.woodStructure != 0">
              <el-input v-model="featureForm.woodFeature" placeholder="请输入木结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="石结构" prop="stoneFeature" v-if="featureDetail.stoneStructure != 0">
              <el-input v-model="featureForm.stoneFeature" placeholder="请输入石结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
            <el-form-item label="其他结构" prop="otherFeature" v-if="featureDetail.otherStructure != 0">
              <el-input v-model="featureForm.otherFeature" placeholder="请输入其他结构" maxlength="150" show-word-limit
                type="textarea" :rows="3" resize="none" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitFeature">确 定</el-button>
              <el-button plain @click="cancelFeature">取 消</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 生成饼状图 -->
        <el-dialog title="生成饼状图" v-model="chartOpen" width="1000px" append-to-body>
          <el-row>
            <el-col :span="12">
              <div id="typePie" style="width: 100%;height: 400px;"></div>
            </el-col>
            <el-col :span="12">
              <div id="yearPie" style="width: 100%;height: 400px;"></div>
            </el-col>
          </el-row>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="savePiePic">保存</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="samplingSurvey">
//地图
import SamplingSurveyMap from '@/map/basedatamanage/samplingSurvey/map.vue';
import ChartsView from '@/views/basedatamanage/spaceData/chartsView.vue';
import { listSurvey, getSurvey, delSurvey, updateSurvey, mapAllListSurvey, saveStructureFeature, savePie } from "@/api/basedatamanage/survey";
import { getProvince, getChildArea } from "@/api/system/division";
import { getToken } from "@/utils/auth";
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();

/*** 导入参数 */
const upload = reactive({
  open: false,
  title: "",
  isUploading: false,
  headers: { token: "token " + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + "/sampling/uploadSampling"
});
const surveyList = ref([]);
const open = ref(false);
const loading = ref(true);
const isEdit = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const activeName = ref("first");
const dateRange = ref([]);
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]);//区、县
// 区分编辑表单和查看表单
const canEdit = ref(true)
// 正整数校验
const positiveInteger = (rule, value, callback) => {
  if (value == null) {
    callback()
  } else if (isNaN(value)) {
    return callback(new Error());
  } else if (value.indexOf(".") != -1) {
    callback(new Error());
  } else {
    callback()
  }
}
// 最多保留两位小数
const positive2decimals = (rule, value, callback) => {
  if (isNaN(value) || !value) {
    callback(new Error());
  } else if (value.indexOf(".") != -1 && (value.split('.').length > 2 || value.split('.')[0] === '' || value.split('.')[1] === '')) {
    callback(new Error()) //防止输入多个小数点
  } else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
    callback(new Error()) //小数点后两位
  } else {
    callback();
  }
}
const data = reactive({
  form: {},
  queryParams: {
    page: 1,
    rows: 10,
    taskName: null,
    fieldSurveyName: null,
    provinceId: null,
    cityId: null,
    areaId: null,
    township: null,
    isSubmit: null,
    submitter: null,
    submitTime: null,
    startTime: null,
    endTime: null
  },
  rules: {
    totalHouseholdNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }, {
      required: true, message: '请输入总户数', trigger: 'blur'
    }],
    totalPopulation: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }, {
      required: true, message: '请输入总人口（人）', trigger: 'blur'
    }],
    actualResidentPopulation: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }, {
      required: true, message: '请输入实际常驻人口（人）', trigger: 'blur'
    }],
    migrantWorkers: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }, {
      required: true, message: '请输入外出务工人口（人）', trigger: 'blur'
    }],
    childrenProportion: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    youngProportion: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    oldAgeProportion: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    trafficConditions: [{ required: true, message: '请选择交通通达情况', trigger: 'change' }],
    environment: [{ required: true, message: '请选择周边地理环境', trigger: 'change' }],
    houseNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }, {
      required: true, message: '请输入房屋数量', trigger: 'blur'
    }],
    roomAverageNum: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    mainBuildingMaterials: [{ required: true, message: '请输入主要建筑材料', trigger: 'blur' }],
    highStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    steelStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    concreteStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    masonryStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    brickWoodStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    soilStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    woodStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    stoneStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    otherStructure: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build70sBefore: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build70s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build80s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build90s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build00s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build10s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build16s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    build20s: [{ required: true, message: '请输入正确的数值，最多保留两位小数', trigger: 'blur', validator: positive2decimals }],
    isSchool: [{ required: true, message: '请选择周边是否有学校', trigger: 'change' }],
    studentNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }],
    classroomNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }],
    isHospital: [{ required: true, message: '请选择周边是否有医院', trigger: 'change' }],
    doctorNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }],
    bedNum: [{ message: '请输入整数值', trigger: 'blur', validator: positiveInteger }],
    isDisaster: [{ required: true, message: '请选择周边是否有地质灾害', trigger: 'change' }],
    // disasterType,isSubmit
    // disasterScale,
    isReservoir: [{ required: true, message: '请选择周边是否有水库', trigger: 'change' }],
    isSubmit: [{ required: true, message: '请选择数据状态', trigger: 'change' }],
    // damType,
    // reservoirCapacity,
    remarks: [{ max: 100, message: '最多100字', trigger: "blur" }]
  },
  chartViewQueryParams: {//空间统计查询参数
    province: "",
    city: "",
    county: "",
    provinceId: "",
    cityId: "",
    countyId: "",
    dataType: "抽样调查点概况信息",//数据类型
    geomText: "",//地图圈选空间数据
    title: "",//显示空间统计标题
    showBool: false,//是否显示
  },
  newQueryParams: {
    province: "",
    city: "",
    county: "",
    provinceId: "",
    cityId: "",
    countyId: "",
    dataType: "抽样调查点概况信息",//数据类型
  },
});
const { queryParams, form, rules, chartViewQueryParams, newQueryParams } = toRefs(data);

//地图传参--start
const completeRefreshSamplingSurvey = ref(false);//防止刷新后地图不显示
const allListData = ref([]);

const showHideQueryDivBool = ref(false);//是否显示查询面板
const showHideQueryDiv = (bool) => {//显示|隐藏查询面板
  showHideQueryDivBool.value = bool;
  //清空查询参数
  clearQueryParams();
  queryMapBool.value = false;//关闭地图圈选查询
}

//清空查询参数
function clearQueryParams() {
  newQueryParams.value.province = null;
  newQueryParams.value.city = null;
  newQueryParams.value.county = null;
  newQueryParams.value.provinceId = null;
  newQueryParams.value.cityId = null;
  newQueryParams.value.countyId = null;
  cityData.value = [];
  areaData.value = [];
}

//选择省
function newChooseProvince(value) {
  newQueryParams.value.city = null;
  newQueryParams.value.county = null;
  newQueryParams.value.province = value.name;
  newQueryParams.value.cityId = null;
  newQueryParams.value.countyId = null;
  newQueryParams.value.provinceId = value.id;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
//选择市
function newChooseCity(value) {
  newQueryParams.value.city = value.name;
  newQueryParams.value.county = null;
  newQueryParams.value.cityId = value.id;
  newQueryParams.value.countyId = null;
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县
function newChooseCounty(value) {
  newQueryParams.value.county = value.name;
  newQueryParams.value.countyId = value.id;
}

//地图圈选查询
const showQueryMapDraw = (polygonWkt) => {
  if (polygonWkt != null && polygonWkt != "") {
    console.log("地图圈选查询");
    console.log(polygonWkt);
    //空间统计查询参数
    chartViewQueryParams.value.province = "";
    chartViewQueryParams.value.city = "";
    chartViewQueryParams.value.county = "";
    chartViewQueryParams.value.provinceId = "";
    chartViewQueryParams.value.cityId = "";
    chartViewQueryParams.value.countyId = "";
    chartViewQueryParams.value.geomText = polygonWkt;//地图圈选空间数据
    let title = "【" + chartViewQueryParams.value.dataType + "】";
    chartViewQueryParams.value.title = title + "地图圈选查询空间统计结果";//标题
    //显示空间统计
    chartViewQueryParams.value.showBool = true;
  }
}

//开启空间统计查询功能
const queryChartsView = () => {
  //空间统计查询参数
  chartViewQueryParams.value.province = newQueryParams.value.province;
  chartViewQueryParams.value.city = newQueryParams.value.city;
  chartViewQueryParams.value.county = newQueryParams.value.county;
  chartViewQueryParams.value.provinceId = newQueryParams.value.provinceId;
  chartViewQueryParams.value.cityId = newQueryParams.value.cityId;
  chartViewQueryParams.value.countyId = newQueryParams.value.countyId;
  chartViewQueryParams.value.dataType = newQueryParams.value.dataType;//数据类型
  chartViewQueryParams.value.geomText = "";//地图圈选空间数据
  let title = "";
  if (newQueryParams.value.province != null) {
    title += newQueryParams.value.province;
  }
  if (newQueryParams.value.city != null) {
    title += newQueryParams.value.city;
  }
  if (newQueryParams.value.county != null) {
    title += newQueryParams.value.county;
  }
  title += "【" + newQueryParams.value.dataType + "】";
  chartViewQueryParams.value.title = title + "查询空间统计结果";//标题
  //显示空间统计
  chartViewQueryParams.value.showBool = true;
  queryMapBool.value = false;//关闭地图圈选查询
}
const queryMapBool = ref(false);//是否开启地图圈选查询
//地图圈选查询空间统计
const queryMapClick = () => {
  //清空查询参数
  clearQueryParams();
  //空间统计查询参数
  chartViewQueryParams.value.province = "";
  chartViewQueryParams.value.city = "";
  chartViewQueryParams.value.county = "";
  chartViewQueryParams.value.provinceId = "";
  chartViewQueryParams.value.cityId = "";
  chartViewQueryParams.value.countyId = "";
  chartViewQueryParams.value.geomText = "";//地图圈选空间数据
  queryMapBool.value = false;//关闭地图圈选查询
  nextTick(() => {
    queryMapBool.value = true;//开启地图圈选查询
  });
}
//关闭空间统计
const hideChartView = (bool) => {
  //关闭空间统计
  chartViewQueryParams.value.showBool = bool;
}
//地图传参--end

/** 查询抽样点调查列表 */
function getList() {
  loading.value = true;
  listSurvey(queryParams.value).then(response => {
    surveyList.value = response.data.rows;
    total.value = response.data.total;
    loading.value = false;
  });
}

/** 查询抽样点调查列表 */
function getMapList() {
  //地图查询全部抽样点调查列表
  mapAllListSurvey().then((response) => {
    nextTick(() => {
      allListData.value = response.data;
      // completeRefreshSamplingSurvey.value = true;//防止地图刷新后不显示
    });
  });
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}
// 表单重置
function reset() {
  form.value = {
    id: null,
    taskName: null,
    taskCode: null,
    fieldSurveyName: null,
    province: null,
    city: null,
    area: null,
    township: null,
    longitude: null,
    latitude: null,
    totalHouseholdNum: null,
    totalPopulation: null,
    actualResidentPopulation: null,
    migrantWorkers: null,
    childrenProportion: null,
    youngProportion: null,
    oldAgeProportion: null,
    trafficConditions: null,
    environment: null,
    houseNum: null,
    roomAverageNum: null,
    mainBuildingMaterials: null,
    highStructure: null,
    steelStructure: null,
    concreteStructure: null,
    masonryStructure: null,
    brickWoodStructure: null,
    soilStructure: null,
    woodStructure: null,
    stoneStructure: null,
    otherStructure: null,
    build70sBefore: null,
    build70s: null,
    build80s: null,
    build90s: null,
    build00s: null,
    build10s: null,
    build16s: null,
    build20s: null,
    isSchool: null,
    studentNum: null,
    classroomNum: null,
    isHospital: null,
    doctorNum: null,
    bedNum: null,
    isDisaster: null,
    disasterType: null,
    disasterScale: null,
    isReservoir: null,
    damType: null,
    reservoirCapacity: null,
    remarks: null,
    submitter: null,
    submitTime: null,
  };
  proxy.resetForm("surveyRef");
}
watch(dateRange, (newValue, oldValue) => {
  queryParams.value.startTime = newValue[0] || null
  queryParams.value.endTime = newValue[1] || null
})
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  cityData.value = [];
  areaData.value = [];
  dateRange.value = []
  handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
}
const selectable = row => {
  if (row.taskStatus != 2 && row.flag == 2) {
    return true
  } else {
    return false
  }
}
// 批量删除
const batchDelete = () => {
  proxy.$modal.confirm(`确认是否删除此${ids.value.length}条数据？`).then(function() {
		return delSurvey(ids.value.join(','))
	}).then(() => {
		proxy.$modal.msgSuccess("删除成功");
		queryParams.value.page = 1;
		getList();
	}).catch(function() { });
}
/** 修改按钮操作 */
function handleUpdate(row, status) {
  reset();
  const id = row.id || ids.value
  open.value = true
  form.value = row
  getSurvey(id).then(response => {
    form.value = response.data.data;
    open.value = true;
    title.value = status == 'update' ? "修改抽样点调查" : '查看抽样点调查';
    canEdit.value = status == 'update' ? false : true
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["surveyRef"].validate(valid => {
    if (valid) {
      const { childrenProportion, youngProportion, oldAgeProportion,
        highStructure, steelStructure, concreteStructure, masonryStructure, brickWoodStructure,
        soilStructure, woodStructure, stoneStructure, otherStructure,
        build70sBefore, build70s, build80s, build90s, build00s, build10s, build16s, build20s } = form.value
      // 人口比例
      const chackProportion = (Number(youngProportion) * 100 + Number(oldAgeProportion) * 100 + Number(childrenProportion) * 100) / 100 == 100 ? true : false
      if (!chackProportion) {
        proxy.$modal.msgError("请确保人口比例之和为100");
        return
      }
      // 房屋类型比例
      const checkStructure = (Number(highStructure) * 100 + Number(steelStructure) * 100 + Number(concreteStructure) * 100
        + Number(masonryStructure) * 100 + Number(brickWoodStructure) * 100 + Number(soilStructure) * 100
        + Number(woodStructure) * 100 + Number(stoneStructure) * 100 + Number(otherStructure) * 100) / 100 == 100 ? true : false
      if (!checkStructure) {
        proxy.$modal.msgError("请确保房屋类型比例之和为100");
        return
      }
      // 房屋建造年代比例
      const checkBuild = (Number(build70sBefore) * 100 + Number(build70s) * 100
        + Number(build80s) * 100 + Number(build90s) * 100
        + Number(build00s) * 100 + Number(build10s) * 100 + Number(build16s) * 100 + Number(build20s) * 100) / 100 == 100 ? true : false
      if (!checkBuild) {
        proxy.$modal.msgError("请确保房屋建造年代比例之和为100");
        return
      }
      updateSurvey(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
      });
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  var area = ''
  if (row.province == row.city) {
    area = row.province + row.area
  } else {
    area = row.province + row.city + row.area
  }
  const id = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除抽样调查点为"' + area + '"的数据项？').then(function () {
    return delSurvey(id);
  }).then((res) => {
    getList();
    proxy.$modal.msgSuccess(res.message);
  }).catch(() => { });
}
/*切换标签页*/
function handleClick(tab, event) {
  if (tab.props.name == "first") {
    getMapList();
  } else {
    getList();
  }
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  });
}
function chooseProvince(value) {
  queryParams.value.cityId = null;
  queryParams.value.areaId = null;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value).then(response => {
    cityData.value = response.data;
  });
  //provinceData.value.map(item => {//遍历数据
  //  if (item.id == value) {
  //    if (item.name == "北京市" || item.name == "天津市" || item.name == "上海市" || item.name == "重庆市") {
  //      cityData.value.push(JSON.parse(JSON.stringify(item)));
  //    } else {
  //      getChildArea(value).then(response => {
  //        cityData.value = response.data;
  //      });
  //    }
  //    return;
  //  }
  //})
}

function chooseCity(value) {
  queryParams.value.areaId = null;
  areaData.value = [];
  getChildArea(value).then(response => {
    areaData.value = response.data;
  });
}


// 模板下载
function importTemplate(name) {
  proxy.download("/base/product/downloadExcel", {
    fileName: name
  }, name);
};

/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
};

/** 打开导入表弹窗 */
function handleImport() {
  upload.title = "导入";
  upload.open = true;
}

/**文件上传前处理 */
function handleFileBeforeUpload(file) {
  proxy.$modal.loading("正在上传文件，请稍候...");
  return true
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
// 上传失败
function handleFileUploadError(err) {
  proxy.$modal.closeLoading();
  proxy.$modal.msgError("上传文件失败");
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$modal.closeLoading();
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.message + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/sampling/exportSampling', {
    ...queryParams.value
  }, `抽样调查点概况信息_${new Date().getTime()}.xls`)
}

const structureFeatureDialog = ref(false)
const featureRef = ref()
let featureForm = ref({
  highFeature: '',
  steelFeature: '',
  concreteFeature: '',
  masonryFeature: '',
  brickWoodFeature: '',
  soilFeature: '',
  woodFeature: '',
  stoneFeature: '',
  otherFeature: ''
})
const featureRules = reactive({
  highFeature: [{ required: true, message: '请输入高层结构', trigger: 'blur' }],
  steelFeature: [{ required: true, message: '请输入钢结构', trigger: 'blur' }],
  concreteFeature: [{ required: true, message: '请输入多层钢筋混凝土结构', trigger: 'blur' }],
  masonryFeature: [{ required: true, message: '请输入砖混结构', trigger: 'blur' }],
  brickWoodFeature: [{ required: true, message: '请输入砖木结构', trigger: 'blur' }],
  soilFeature: [{ required: true, message: '请输入土结构', trigger: 'blur' }],
  woodFeature: [{ required: true, message: '请输入木结构', trigger: 'blur' }],
  stoneFeature: [{ required: true, message: '请输入石结构', trigger: 'blur' }],
  otherFeature: [{ required: true, message: '请输入其他结构', trigger: 'blur' }]
})
const featureDetail = ref({})
// 填写典型结构特征
const structureFeature = (row) => {
  structureFeatureDialog.value = true
  featureForm.value.id = row.id
  getSurvey(row.id).then(response => {
    featureDetail.value = response.data.data
    featureForm.value = response.data.data
  })
}
// 生成饼状图
const chartOpen = ref(false)
const chartPieData = ref({
  id: '',
  typePie: '',
  yearsPie: ''
})
const creatChart = (row) => {
  chartPieData.value.id = row.id
  getSurvey(row.id).then(res => {
    if (res.code == 200) {
      const {
        highStructure, steelStructure, concreteStructure, masonryStructure, brickWoodStructure,
        soilStructure, woodStructure, stoneStructure, otherStructure,
        build70sBefore, build70s, build80s, build90s, build00s, build10s, build16s, build20s
      } = res.data.data
      const structureData = [
        { name: '高层建筑', value: highStructure },
        { name: '钢结构', value: steelStructure },
        { name: '多层钢筋混凝土', value: concreteStructure },
        { name: '砖混结构', value: masonryStructure },
        { name: '砖木结构', value: brickWoodStructure },
        { name: '土结构', value: soilStructure },
        { name: '木结构', value: woodStructure },
        { name: '石结构', value: stoneStructure },
        { name: '其他结构', value: otherStructure }
      ]
      const timeData = [
        { name: '1970年以前', value: build70sBefore },
        { name: '1971年-1980年', value: build70s },
        { name: '1981年-1990年', value: build80s },
        { name: '1991年-2000年', value: build90s },
        { name: '2001年-2010年', value: build00s },
        { name: '2011年-2015年', value: build10s },
        { name: '2016年-2020年', value: build16s },
        { name: '2021年及以后', value: build20s }
      ]
      const chartData = [...structureData, ...timeData]
      if (chartData.some(item => item.value == null)) {
        proxy.$modal.msgWarning('请先将房屋类型比例、房屋建造年代比例填写完整！')
        return
      }

      chartOpen.value = true
      nextTick(() => {
        echartRender({ id: 'typePie', title: '不同结构类型房屋占比', data: structureData })
        echartRender({ id: 'yearPie', title: '不同年代房屋占比', data: timeData })
      })
    }
  });
}

const echartRender = (params) => {
  const { id, title, data } = params
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom, 'light');
  var option;

  option = {
    title: {
      text: title,
      left: 'center',
      top: 20
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 20,
      top: 'center',
      itemWidth: 10,
      itemHeight: 10
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        left: '-20%',
        data,
        label: {
          formatter: '{d}%',
          position: 'inside'
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
}

// 保存饼状图
const savePiePic = () => {
  const typePieEchart = echarts.init(document.getElementById('typePie'), 'light')
  const yearsPieEchart = echarts.init(document.getElementById('yearPie'), 'light')

  chartPieData.value.typePie = typePieEchart.getDataURL()
  chartPieData.value.yearsPie = yearsPieEchart.getDataURL()

  savePie(chartPieData.value).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess('保存饼状图成功！')
      chartOpen.value = false
    }
  })
}

const submitFeature = () => {
  featureRef.value.validate((valid, fields) => {
    if (valid) {
      saveStructureFeature(featureForm.value).then(res => {
        if (res.code == 200 && res.message == "修改成功!") {
          proxy.$modal.msgSuccess(res.data)
          structureFeatureDialog.value = false
        }
      })
    } else {
      featureRef.value.scrollToField(Object.keys(fields)[0])
    }
  })
}
const cancelFeature = () => {
  structureFeatureDialog.value = false
  proxy.resetForm("featureRef");
}

onMounted(() => {
  getMapList();
  getProvinceData()
  completeRefreshSamplingSurvey.value = true;//防止地图刷新后不显示
})
</script>

<style scoped lang="scss">
.new-closeBtnDiv {
  position: absolute;
  /*right: 50px;*/
  right: 0px;
  bottom: 20px;
}

//查询面板
.new-queryDiv {
  position: absolute;
  top: 16px;
  left: 100px;
  width: 358px;
  height: 230px;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #707070;
  border-radius: 4px;
}

.new-queryDiv-inner {
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  bottom: 0px;
}

.new-queryBtnDiv {
  position: absolute;
  /*left: 80px;*/
  left: 0px;
  bottom: 20px;
}

.new-queryMapBtnDiv {
  position: absolute;
  left: 104px;
  bottom: 20px;
}
:deep(.el-form-item__content){
	align-items: start!important
}
</style>
